<!-- 示例用法 -->
<template>
  <div class="page">
    <div class="box">
      <BasicAMap :map-options="mapOptions" :extract-info="extractInfo"></BasicAMap>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MapOptions } from '@/components/basic-AMap/types'

const mapOptions: MapOptions = {
  viewMode: '3D',
  pitch: 40,
  mapStyle: 'amap://styles/5a16e14ff8d082742d2caf4b2337a5fd',
  showLabel: true,
  features: ['bg', 'buidling', 'point']
}
const extractInfo = ref<any>({
  markers: [
    {
      lnglat: [116.39, 39.99]
    }
  ],
  heatMarkers: []
})

setTimeout(() => {
  extractInfo.value.heatMarkers = [
    {
      lnglat: [116.39, 39.99],
      count: 5
    },
    {
      lnglat: [114.39, 34.99],
      count: 15
    }
  ]
}, 0)

setTimeout(() => {
  extractInfo.value.heatMarkers = [
    // {
    //   lnglat: [116.39, 39.99],
    //   count: 5
    // }
  ]
}, 2000)
</script>

<style lang="less" scoped>
.page {
  width: 1200px;
  height: 100%;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.1);
  .box {
    width: 100%;
    height: 100%;
  }
}
</style>
